<template>
  <div>
    <div class="banner" @click="handleGalleryClick">
      <img class="banner-img" :src="bannerImg" />
      <div class="banner-info">
        <p class="banner-title">{{this.sightName}}</p>
        <p class="banner-number">
          <span class="iconfont">&#xe649;</span>
          <span>{{this.gallaryImgs.length}}</span>
        </p>
      </div>
    </div>
    <fade-animation>
      <common-gallery
      :imgs="gallaryImgs"
      v-show="galleryShow"
      @close="handleGalleryclose"></common-gallery>
    </fade-animation>
  </div>
</template>

<script>
import CommonGallery from 'common/gallery/Gallery'
import FadeAnimation from 'common/fade/FadeAnimation'
export default {
  name: 'DetailBanner',
  components: {
    CommonGallery,
    FadeAnimation
  },
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
  data () {
    return {
      galleryShow: false,
      imgs: ['http://img1.qunarzz.com/sight/p0/1803/3e/3efbb3098439469a3.img.jpg_r_800x800_00dd921a.jpg', 'http://img1.qunarzz.com/sight/p0/1803/ef/ef5218ec61ba9b5ca3.img.jpg_r_800x800_33d7d17d.jpg']
    }
  },
  methods: {
    handleGalleryClick () {
      this.galleryShow = true
    },
    handleGalleryclose () {
      this.galleryShow = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .banner
    background: #eee
    position: relative
    .banner-img
      width: 100%
    .banner-info
      width: 100%
      font-size: .36rem
      color: #fff
      position: absolute
      bottom: .3rem
      .banner-title
        float: left
        margin-left: .2rem
      .banner-number
        float: right
        font-size: .18rem
        margin-right: .2rem
</style>
